<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由的使用</title>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/user/1">用户1</router-link>
    <router-link to="/user/2">用户2</router-link>
    <router-link to="/about">关于</router-link>

    <router-view></router-view>
</div>

<template id="user">
    <h1>User Page</h1>
    <h2>用户 {{ $route.params.id }} 的主页</h2>
    <!--  当前的路径  -->
    <div>{{ $route.path }}</div>

    <router-link :to="append($route.path, 'more')">查看更多信息</router-link>
    <router-view></router-view>
</template>
<script !src="" type="module">
    import {createApp} from "../../../../js/vue.esm-browser.js";
    import {defineComponent} from "../../../../js/vue.esm-browser.js";
    import {createRouter, createWebHashHistory} from "../../../../js/vue-router.esm-browser.js";

    const Home = {template: "<h1>Home Page</h1>"}
    const About = {template: "<h1>About Page</h1>"}

    // const User = {template:"<h1>User Page</h1>"}

    let User = defineComponent(
        {
            template: "#user",
            setup() {
                return {};
            }
        }
    );

    let app = createApp(
        {
            setup() {
                return {}
            }
        }
    )

    // 错误原因：每调用一次，都会进行一次的拼接。/user/2/more/more/more
    // 真正的目标是：当前的路径和自路径只拼接一次就够    目标：/user/2/more
    /*app.config.globalProperties.append = (path, pathToAppend) =>
        path + (path.endsWith('/') ? '' : '/') + pathToAppend*/

    // 当前页面的路径和子路径的拼接

    app.config.globalProperties.append = function (currentPath, pathToAppend) {
        // 判断当前的路径是否以自路径结尾，如果结尾的话，说明已经拼接过，不需要再次拼接
        if (currentPath.endsWith(pathToAppend)) {
            return currentPath
        }
        // 没有以子路径结尾，需要进行拼接。
        else {
            return currentPath + (currentPath.endsWith('/') ? '' : '/') + pathToAppend
        }
    }

    let routes = [
        {
            path: "/",
            component: Home,
        },
        {
            path: "/about",
            component: About,
        },
        {
            path: "/user/:id",
            component: User,
            children: [
                {
                    path: "more",
                    component: {
                        template: "<h3>用户 {{ $route.params.id }} 的详细信息</h3>"
                    }
                }
            ]
        },
    ]

    let router = createRouter(
        {
            history: createWebHashHistory(),
            routes: routes,
        }
    );

    app.use(router)
    app.mount("#app")
</script>
</body>
</html>